<template>
  <!-- 代码知识 -->
  <div class="box">
    <!-- 头部组件 -->
    <headerbg></headerbg>
    <!-- 面包屑导航 -->
    <div class="Breadcrumb max_width">
      <span>首页</span>
      <sapn class="fh_gt">&gt;</sapn>
      <span>代码知识</span>
    </div>
    <!-- conten -->
    <div class="content max_width">
      <!-- 详情页组件 -->
      <detalisNav></detalisNav>
      <!--  -->
      <div class="cont_div">
        <div class="title">
          代码知识
        </div>
        <!--  -->
        <div v-for="(item,index) in List" :key="index" class="div_option">
          <div class="img_box">
            <img :src="item.url">
          </div>
          <div class="text_box">
            <p>{{ item.title }}</p>
            <p>{{ item.content }}</p>
            <div class="fun_box">
              <div>
                <img src="../assets/Knowledege/dianzan.png">
                {{ item.num }}
              </div>
              <div>
                <img src="../assets/Knowledege/xiaoxi.png">
                {{ item.num }}
              </div>
              <div class="time_box">
                <div>
                  <img src="../assets/Knowledege/shoucang.png">
                  {{ item.num }}
                </div>

                <div>
                  1分钟前
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 加载区域 -->
        <div class="Loading">
          加载更多&gt;&gt;
        </div>
      </div>
    </div>
    <!-- foot -->
    <!--    <Foot></Foot>-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      List: [
        {
          url: require('../assets/Knowledege/banner1.png'), title: '互联网热点热搜反应了什么社会现象？',
          content: '最两年发生很多热点事件，基本上每周都有一个热爆的热点事件、众所周知，一个热点盖过另一个热点，而互联网群众的记忆只有7秒11111111111111111111111111111111111111111111111',
          num: 12
        },
        {
          url: require('../assets/Knowledege/banner2.png'), title: '互联网热点热搜反应了什么社会现象？',
          content: '最两年发生很多热点事件，基本上每周都有一个热爆的热点事件、众所周知，一个热点盖过另一个热点，而互联网群众的记忆只有7秒11111111111111111111111111111111111111111111111',
          num: 12
        },
        {
          url: require('../assets/Knowledege/banner3.png'), title: '互联网热点热搜反应了什么社会现象？',
          content: '最两年发生很多热点事件，基本上每周都有一个热爆的热点事件、众所周知，一个热点盖过另一个热点，而互联网群众的记忆只有7秒11111111111111111111111111111111111111111111111',
          num: 12
        },
        {
          url: require('../assets/Knowledege/banner4.png'), title: '互联网热点热搜反应了什么社会现象？',
          content: '最两年发生很多热点事件，基本上每周都有一个热爆的热点事件、众所周知，一个热点盖过另一个热点，而互联网群众的记忆只有7秒11111111111111111111111111111111111111111111111',
          num: 12
        },
        {
          url: require('../assets/Knowledege/banner5.png'), title: '互联网热点热搜反应了什么社会现象？',
          content: '最两年发生很多热点事件，基本上每周都有一个热爆的热点事件、众所周知，一个热点盖过另一个热点，而互联网群众的记忆只有7秒11111111111111111111111111111111111111111111111',
          num: 12
        },
        {
          url: require('../assets/Knowledege/banner6.png'), title: '互联网热点热搜反应了什么社会现象？',
          content: '最两年发生很多热点事件，基本上每周都有一个热爆的热点事件、众所周知，一个热点盖过另一个热点，而互联网群众的记忆只有7秒11111111111111111111111111111111111111111111111',
          num: 12
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;

  .Breadcrumb {
    margin: 0 auto;
    padding: 23px 0;
    font-size: 18px;
    color: #999999;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .fh_gt {
      padding: 0 10px;
      cursor: auto;
    }

    span {
      cursor: pointer;
    }

    span:hover {
      color: #ED9B5D
    }
  }

  // content
  .content {
    margin: 18px auto;
    display: flex;
    justify-content: flex-start;
    height: auto;

    .cont_div {
      width: 962px;
      background: #FFFFFF;
      box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      margin-left: 41px;

      .title {
        color: #333333;
        font-size: 28px;
        line-height: 48px;
        text-align: center;
        margin: 0 auto 45px;
        width: 864px;
        border-bottom: 1px #CCCCCC solid;
        padding: 60px 0 45px;
      }

      .div_option {
        width: 864px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px #CCCCCC solid;

        .img_box {
          width: 212px;
          height: 156px;
          // 图片自适应
        }

        .img_box:hover {
          box-shadow: 0px 9px 18px 2px rgba(0, 0, 0, 0.2);
        }

        .text_box {
          width: 590px;

          p:first-child {
            font-size: 22px;
            color: #333333;
            line-height: 48px;
          }

          p {
            overflow: hidden;
            width: 598px;
            font-size: 18px;
            color: #999999;
            line-height: 26px;
            word-break: break-all;
            text-overflow: ellipsis; //超出本分显示...
            display: -webkit-box; //对象作为伸缩盒子模型显示
            -webkit-box-orient: vertical; //设置或检索伸缩盒子对象的子元素的排列方式
            -webkit-line-clamp: 2; //显示行数
          }

          .fun_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;

            div {
              display: flex;
              align-items: center;
              font-size: 16px;
              color: #666666;
              cursor: pointer;

              img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
              }
            }

            div:hover {
              color: #ED9B5D
            }

            .time_box {
              width: 282px;
              justify-content: space-between;
            }
          }
        }
      }

      // 取消下边框样式
      .div_option:last-child {
        border: none;
      }

      // 加载区域
      .Loading {
        padding: 55px 0;
        text-align: center;
        font-size: 24px;
      }
    }
  }
}
</style>
